import React, { useCallback, useMemo, useState } from "react";
import { LibAppView } from "../../../../lib";
import { App, Button, Card, Form, Input, Select, Switch } from "antd";
import { FormattedMessage, useIntl } from "react-intl";
import RegionPicker from "@/pages/Admin/Component/RegionPicker";
import { useAdminRight } from "@/pages/Admin/data/AdminPageAuth";
export const Edit = () => {
    const app = LibAppView.useMicroApp();
    const antApp = App.useApp();
    const intl = useIntl();
    const hasEditRight = useAdminRight("editable");
    const journeyData = LibAppView.useJourneyData();
    const [ form ] = Form.useForm();
    const [ componentDisabled, setComponentDisabled] = useState(!hasEditRight);
    const [ defaultFormData ] = useState({
        ...(journeyData.currentStepState || {}),
        repeat_password: (journeyData.currentStepState || {}).password
    });
    const onSubmit = useCallback(() => {
        const formData = form.getFieldsValue();
        const regionData = formData.region || [];
        const updateFormData = {
            ...formData,
            status: formData.status ? 1 : 0,
            province: regionData[0] || "",
            city: regionData[1] || "",
            area: regionData[2] || "",
            region: ''
        }
        if(updateFormData.password === defaultFormData.password) {
            delete updateFormData.password;
            delete updateFormData.repeat_password;
        } else {
            updateFormData.password = btoa(updateFormData.password);
            delete updateFormData.repeat_password;
        }
        setComponentDisabled(true);
        setTimeout(() => {
            app.serviceApi.send({
                endPoint: defaultFormData.id?.length > 0 ? "user.update" : "user.create",
                data: updateFormData
            }).then(() => {
                setComponentDisabled(false);
                antApp.message.success(intl.formatMessage({ id: "admin.pages.form.submit.success", defaultMessage: "Submit successfully."}));
            }).catch((err: any) => {
                setComponentDisabled(false);
                antApp.message.error(err.message);
            });
        }, 1000);
    }, [defaultFormData]);

    const formInitData = useMemo(() => {
        return {
            ...defaultFormData,
            region: [defaultFormData.province, defaultFormData.city, defaultFormData.area]
        };
    }, [defaultFormData])

    return (<Card style={{ width: "100%", minHeight: "76vh", padding: 20 }}>
    <Form
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 12 }}
        layout="horizontal"
        disabled={componentDisabled}
        form={form}
        initialValues={formInitData}
    >
        <Form.Item
            label={<FormattedMessage id="admin.pages.user.list.name" />}
            name="loginName"
        >
            <Input type="text" autoComplete="off" disabled={!hasEditRight || defaultFormData.id > 0}/>
        </Form.Item>
        <Form.Item
            label={<FormattedMessage id="admin.pages.user.list.nickname" />}
            name="userName"
        >
           <Input type="text" autoComplete="off" />
        </Form.Item>
        <Form.Item
            label={<FormattedMessage id="admin.pages.user.list.password.n" />}
            name="password"
        >
           <Input type="password" autoComplete="off" />
        </Form.Item>
        <Form.Item
            label={<FormattedMessage id="admin.pages.user.list.password.r" />}
            name="repeat_password"
        >
           <Input type="password" autoComplete="off" />
        </Form.Item>
        <Form.Item
            label={"手机号码"}
            name="mobile"
        >
           <Input type="text" autoComplete="off" />
        </Form.Item>
        <Form.Item
            label={"科普单位"}
            name="company"
        >
           <Input type="text" autoComplete="off" />
        </Form.Item>
        <Form.Item
            label={"所属地区"}
            name="region"
        >
            <RegionPicker />
        </Form.Item>
        <Form.Item
            label={<FormattedMessage id="admin.pages.user.list.status" />}
            name="status"
        >
            <Switch
                checkedChildren={<FormattedMessage id="admin.pages.menus.edit.status.enable" />}
                unCheckedChildren={<FormattedMessage id="admin.pages.menus.edit.status.disable" />}
            />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
            <Button loading={hasEditRight && componentDisabled} type="primary" htmlType="submit" onClick={onSubmit}>
                <FormattedMessage id="admin.pages.form.submit" />
            </Button>
            <Button disabled={false} style={{marginLeft: 10}} type="default" onClick={() => {
                app.goBack();
            }}>
                <FormattedMessage id="admin.pages.form.back" />
            </Button>
        </Form.Item>
    </Form>
</Card>);
};